<template>
  <el-table
    v-loading="loading"
    :data="data"
    stripe
    style="width: 100%"
    :class="['page_table_body', align]"
    header-cell-class-name="page_table_header"
    row-class-name="page_table_row"
    cell-class-name="page_table_cell"
    highlight-current-row
    v-bind="$attrs"
    resizable
    :border="true"
  >
    <slot></slot>
  </el-table>

  <template v-if="pagination">
    <page-pagination :pagination="pagination" />
  </template>
</template>

<script setup lang="ts">
interface Props {
  data: Record<string, any>[]
  loading?: boolean
  align?: 'left' | 'center' | 'right'
  pagination?: {
    page?: number
    pageSize?: number
    pageSizes?: number[]
    background?: boolean
    layout?: string
    total: number
    onChange?: (size: number) => void
    onPageSizeChange?: (size: number) => void
  }
}

withDefaults(defineProps<Props>(), {
  align: 'left',
  loading: false,
})
</script>

<style lang="scss" scoped>
.page_table_body {
  flex: 2;

  &.center {
    :deep(.el-table__cell) {
      text-align: center;
    }
  }
  &.left {
    :deep(.el-table__cell) {
      text-align: left;
    }
  }

  &.right {
    :deep(.el-table__cell) {
      text-align: right;
    }
  }

  :deep(.el-checkbox__inner) {
    border-radius: 5px;
    width: 16px;
    height: 16px;

    &::after {
      left: 5px;
      top: 2px;
    }
  }
  :deep(.page_table_header) {
    /* 表头 */
    background-color: #f4f7f9 !important;
    font-size: var(--el-font-size-base);
    font-weight: normal;
    color: #9fa6b6;
  }

  :deep(.page_table_cell) {
    font-size: var(--el-font-size-small);
    color: #3c3e41;
  }

  :deep(.el-table__row--striped.page_table_row) {
    background-color: #fbfbfe;
  }

  :deep(.el-table__inner-wrapper) {
    &::before {
      display: none;
    }
  }
}
</style>
